<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <!-- <div class="serchbox">
                    <div class="left">
                        <el-select v-model="input" placeholder="Select">
                            <el-option label="全部" value="0" />
                            <el-option label="已审核" value="1" />
                            <el-option label="未审核" value="2" />
                        </el-select>
                    </div>
                    <div class="right">
                        <div>管理范围：<span>重庆市</span></div>
                        <div class="btn" v-if="input == '2'">
                            <el-button type="primary" text bg>审核不通过</el-button>
                            <el-button type="primary" text bg>审核通过</el-button>
                        </div>
                    </div>
                </div> -->
                <div class="foncBox">
                    <div class="left">
                        <el-input v-model="queryData.keyWords" style="width: 300px" @keyup.enter.native="paginaClick(1)" placeholder="搜索名字、平台账号、证件号码等信息。">
                            <template #suffix>
                                <el-icon class="el-input__icon"><search /></el-icon>
                            </template>
                        </el-input>
                        <sxnfbtn class="leftBtn" @click="paginaClick(1)"> 搜索 </sxnfbtn>
                        <!-- <el-button type="primary" class="leftBtn" text bg @click="paginaClick(1)">搜索</el-button> -->
                    </div>
                    <sxnfbtn @click="refresh" icon="Refresh"> 刷新 </sxnfbtn>
                    <!-- <el-button type="primary" text bg :icon="Refresh" @click="refresh">刷新</el-button> -->
                </div>
            </template>
            <div class="foncBox">
                <div class="left">
                    <addRess class="forminput" style="width: 300px" :value="userInfo.addressArea ? JSON.parse(userInfo.addressArea).keyText : ''" :key="1"></addRess>
                    <span>*授权管理范围</span>
                </div>
                <div class="right">
                    <sxnfbtn @click="condition('')"> 全部列表 </sxnfbtn>
                    <sxnfbtn @click="condition('2')"> 审核通过 </sxnfbtn>
                    <sxnfbtn @click="condition('1')"> 未审核 </sxnfbtn>
                    <sxnfbtn @click="condition('3')"> 审核失败 </sxnfbtn>
                </div>
            </div>
            <el-table :data="pageData.list" style="width: 100%; margin-top: 20px" border>
                <!-- <el-table-column type="selection" v-if="input == '2'" width="55" /> -->
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="提交时间"></el-table-column>
                <el-table-column prop="teamName" label="团队全称"></el-table-column>
                <el-table-column prop="legalPersonName" label="团队法人"></el-table-column>
                <el-table-column prop="type" label="组织机构类型"></el-table-column>
                <el-table-column prop="name" label="团队注册地址">
                    <template #default="scope"> {{ scope.row.address ? scope.row.address.valueText : "" }}{{ scope.row.addressArea ? `/${scope.row.addressArea}` : "" }} </template>
                </el-table-column>
                <el-table-column prop="name" label="认证状态">
                    <template #default="scope">
                        <span v-if="scope.row.certified == '3'" style="color: red">审核失败</span>
                        <span v-if="scope.row.certified == '0'">未审核</span>
                        <span v-if="scope.row.certified == '2'" style="color: #23b14d">审核通过</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="topages(`/publicmanagement/teamaudit/teamattestationmsg?id=${scope.row.teamId}`)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Refresh } from "@element-plus/icons-vue";
import { getTeamCertificate } from "@/api/publicmanagement";
const router = useRouter();
const store = useStore();
const userInfo: any = computed((e: any) => {
    return store.getters.userInfo;
});
const topages = (url: string) => {
    router.push(url);
};
const queryData = reactive({
    pageNum: 1,
    pageSize: 15,
    certified: "",
    keyWords: "",
});
const pageData = reactive({
    list: [],
    total: 0,
});
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};
const condition = (type: string) => {
    queryData.certified = type;
    paginaClick(1);
};
const getPageData = () => {
    getTeamCertificate(queryData).then((res: any) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
        pageData.list.forEach((v: any) => {
            if (v.address) {
                v.address = JSON.parse(v.address);
            }
        });
    });
};
getPageData();
const refresh = () => {
    queryData.pageNum = 1;
    queryData.certified = "";
    queryData.keyWords = "";
    getPageData();
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .foncBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .leftBtn {
                margin-left: 10px;
            }
            span {
                font-weight: 300;
                margin-left: 10px;
                font-size: 12px;
                color: #999999;
            }
        }
        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .item {
                padding: 0 18px;
                height: 38px;
                line-height: 38px;
                margin-left: 18px;
                font-size: 14px;
                color: #333333;
                background: rgba(0, 0, 0, 0.05);
                border-radius: 5px;
                cursor: pointer;
            }
        }
    }
}
</style>
